<!--考勤规则设置表单-->
<template>
  <div class="rule-form">
    <el-table :data="tableData">
      <el-table-column prop="name" label="考勤结果"> </el-table-column>
      <el-table-column prop="rules" label="规则" min-width="250">
        <template slot-scope="scope">
          <pre>{{ scope.row.rules }}</pre>
        </template>
      </el-table-column>
      <el-table-column prop="minutes" label="分钟">
        <editable-cell
          slot-scope="{ row }"
          :can-edit="true"
          v-model="row.minutes"
        >
          <span slot="content">{{ row.minutes }}</span>
        </editable-cell>
      </el-table-column>
      <el-table-column prop="price" label="罚款金额">
        <editable-cell
          slot-scope="{ row }"
          :can-edit="true"
          v-model="row.price"
        >
          <span slot="content">{{ row.price }}</span>
        </editable-cell>
      </el-table-column>
    </el-table>
    <div style="heigh:40px;margin-top:15px;display:flex;justify-content:end">
      <el-button type="primary" @click="confirm" :loading="loading"
        >确定</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import EditableCell from "./EditableCell.vue";
export default {
  name: "rule-form",
  components: {
    EditableCell
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    initData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    initData: {
      handler(v) {
        if (v.length > 0) {
          v.map(item => {
            item.price = String(item.price);
            item.minutes = String(item.minutes);
          });
          this.tableData = v;
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      editModeEnabled: false,
      tableData: [
        {
          name: "普通迟到",
          rules: `晚于上班打卡时间内计为普通迟到`,
          minutes: undefined,
          price: undefined,
          sort: 1,
          status: 1
        },
        {
          name: "一般迟到",
          rules: `晚于上班打卡时间内计为一般迟到`,
          minutes: undefined,
          price: undefined,
          sort: 2,
          status: 1
        },
        {
          name: "严重迟到",
          rules: `晚于上班打卡时间内计为严重迟到`,
          minutes: undefined,
          price: undefined,
          sort: 3,
          status: 1
        },
        {
          name: "早退",
          rules: `早于下班打卡时间计为早退`,
          minutes: undefined,
          price: undefined,
          sort: 4,
          status: 1
        },
        {
          name: "旷工",
          rules: `1、上班迟到超过严重迟到时间计为旷工；\n2、下班早于早退时间打卡计为旷工\n备注：当班次工资全部扣除`,
          minutes: undefined,
          price: undefined,
          sort: 5,
          status: 1
        }
      ]
    };
  },
  methods: {
    confirm() {
      this.validForm();
      this.$emit("confirm", this.tableData);
    },
    cancel() {
      this.$emit("cancel");
    },
    // 检查参数
    validForm() {
      for (let item of this.tableData) {
        if (!item.minutes || !item.price) {
          this.$message.error("请完善时间和罚款，不要留空");
          return;
        }
        const isnum = /^\d+$/;
        if (!isnum.test(item.minutes) || !isnum.test(item.price)) {
          this.$message.error("时间和罚款只能为数字，请核对");
          return;
        }
      }
    }
  }
};
</script>

<style scoped></style>
